<template>
  <div>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">赎回</x-header>
      <div v-if="success == '1'">
        <div class="img-box-success"></div>
        <div class="financial-buy-result">赎回成功!</div>
      </div>
      <div v-else>
        <div class="img-box-failed"></div>
        <div class="financial-buy-result">赎回失败!</div>
      </div>
      <div class="financial-buy-result-detail">
        <div><div class="result-item-left">转出产品</div><div class="result-item-right">{{repord.OutPrdName}}({{repord.OutPrdNameType}})</div></div>
        <div><div class="result-item-left">转入产品</div><div class="result-item-right">{{repord.IntoPrdName}}({{repord.IntoPrdNameType}})</div></div>
        <div><div class="result-item-left">转换份额</div><div class="result-item-right">{{repord.TransformLot}}</div></div>
      </div>
      <div class="financial-result-button" @click="gotoHome">完成</div>
  </div>
</template>

<script>
/* eslint-disable camelcase */
export default {
  data () {
    return {
      repord: {
        OutPrdName: '',
        OutPrdNameType: '',
        IntoPrdName: '',
        IntoPrdNameType: '',
        TransformLot: ''
      },
      success: '0'
    }
  },
  methods: {
    gotoHome: function () {
      this.$router.push({name: 'FinancialMain'})
    },
    refreshTest: function () {
      let l_vm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'FinancialRedeemResult', 'user_Data': {'InvestmentExpires': '1211098', 'CurrencyType': '014'}}}),
        function (response) {
          l_vm.success = response.data.status
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            l_vm.repord = response.data.data[0]
          } else {
            console.log('fail')
          }
        }
      )
    }
  },
  created () {
    this.refreshTest()
  }
}
</script>

<style scoped>
.a, .b{
  width: 100px;
  text-align: center;
  background: lightcoral;
}
.img-box-success{
  width: 1.08rem;
  height: 1.08rem;
  margin-top: .8rem;
  margin-bottom: .52rem;
  margin-left: 50%;
  transform: translateX(-50%);
  background: url(../../../assets/img/Financial/FinancialBuyResultSuccess.png) no-repeat left top;
  background-size: 100% 100%;
}
.img-box-failed{
  width: 1.08rem;
  height: 1.08rem;
  margin-top:.8rem;
  margin-bottom: .52rem;
  margin-left: 50%;
  transform: translateX(-50%);
  background: url(../../../assets/img/Financial/zunxiang.png) no-repeat left top;
  background-size: 100% 100%;
}
.financial-buy-result{
  text-align: center;
  font-size: .28rem;
}
.financial-buy-result-detail{
  font-size:.28rem;
  margin:.68rem .3rem 1.12rem .3rem;
  padding: 0.26rem .3rem;
  border-radius: .28rem;
  background: #F7F8FA;
}
.financial-buy-result-detail>div{
  padding: .14rem 0;
}
.result-item-left{
  width:30%;
  float: left;
  color:rgba(153,153,153,1);
}
.result-item-right{
  display:inline-block;
  text-align: right;
  width:70%;
  color:rgba(51,51,51,1);
}
.financial-result-button{
  width: 3.4rem;
  height: .88rem;
  margin: 0 auto;
  line-height: .88rem;
  font-size: .34rem;
  color: #FFF;
  text-align: center;
  background: #EC1B30;
  border-radius: 0.06rem;
}
</style>
